<template>
	<div class="home" style="width: 100%;">
		<!--电脑端-->
		
		<div class="top" style="" >
			<Row type="flex" align="middle">
				<Col span="12" style="padding-top: 10px;padding-bottom: 5px;">
					<img  src="../../static/img/logo.png" />
				</Col>
				<Col span="12" style="text-align: right;">
					<span v-bind:class="[item.label == menuSelect?activeclass:'']" @click="menuClick(item.label)" v-for="item in menu" :key="item.value" style="margin: 10px;cursor: pointer;">
			    		{{item.label}}
			    	</span>
					<span @click="goLogin" style="cursor: pointer;margin: 10px;display: inline-block;background-color: #009a00;padding: 5px 20px;border-radius: 2px;color: white;">
			    		登录
			    	</span>
			    	<Dropdown @on-click="PersonCenter" trigger="click" style="text-align: center;">
				        <a href="javascript:void(0)">
				            137****7777
				            <Icon type="ios-arrow-down"></Icon>
				        </a>
				        <DropdownMenu slot="list">
				            <DropdownItem name="personCenter">我的订单</DropdownItem>
				            <DropdownItem name="loginOut" divided>退出</DropdownItem>
				        </DropdownMenu>
				    </Dropdown>
				</Col>
			</Row>
		</div>
		
		<!--手机端top-->
			<div class="m-top"  >
				<Row type="flex" align="middle" >
					<Col span="8" style="height: 50px;display: flex;align-items: center;">
						<Icon @click="value2 = true" style="font-size: 40px;margin-left: 10px;color: white;" type="ios-menu" />
					</Col>
					<Col span="8" style="height: 50px;display: flex;align-items: center;justify-content: center;">
						<div style="font-size: 24px;color: white;">
							蕙嫂家政
						</div>
					</Col>
					<Col span="8" style="text-align: right;">
						<Icon @click="goPersonCenter" style="font-size: 40px;margin-right: 10px;color: white;" type="md-person" />
					</Col>
				</Row>
			</div>
			<Drawer width="200" placement="left" :closable="false" v-model="value2">
				<div slot="header">
					<img style="width: 100%;" src="../../static/img/logo.png"/>
				</div>
		        <div @click="menuClick(item.label)" v-for="item in menu" :key="item.value" >
		        		<p v-bind:class="[item.label == menuSelect?activeclass:'']" style="display: flex;justify-content: center;">{{item.label}}</p>
		        		<div style="width: 100%;height: 1px;background-color: #e8eaec;margin: 15px 0px;"></div>
		        </div>
		    </Drawer>
		<!---->
		<router-view ></router-view>
		
		
		<!--底部-->
		<div  v-if="this.$route.path.indexOf('/login') >= 0?false:true">
			
		
			<div class="small-hiddle" style="height: 40px;background-color: #f7f7f7;"></div>
			<div class="small-hiddle" style="width: 1200px;margin: 0 auto;padding: 5px 0px;">
				<Row type="flex" align="middle" justify="center">
					<Col span="24" style="text-align: center;">
						<div style="font-size: 25px;margin: 15px;">
			        		<div>服务保障</div>
			        		<div style="height: 2px;width: 80px;background-color: #009a00;margin: 0 auto;margin-top: 10px;"></div>
			        	</div>
					</Col>
				</Row>
				<Row type="flex" align="middle" style="justify-content: center;">
					<Col v-for="(item,index) in serveGoods" :key="item.name" >
						<div  style="background-color: white;display: inline-block;margin:43px;width:86px;text-align: center;">
							<div  >
								<img style="width:86px;height:86px;" :src="item.src"/>
							</div>
							<p style="padding-top:10px ;font-size: 15px;color: #000000;">{{item.name}}</p>
						</div>
					</Col>
				</Row>
			</div>
			
			<Row  type="flex" align="middle" justify="center">
				<Col span="24" class="foot">
					<div >
		        		<!--<div style="font-size: 30px;color: white;">蕙嫂家政</div>-->
		        		<p style="color: white;font-size:40px;font-style: oblique ">0592-6666666</p>
		        		<div style="color: white;">服务项目：月嫂服务 、育婴服务、无痛催乳、家庭保姆、家庭厨师、临时保洁、护工护理、物业管理、家电清洗、水电维修、水管清洗、搬家搬厂、房屋维修</div>
		        		<div style="color: white;">Copyright©2020-2020 All Right Reserved 蕙嫂(厦门)家政服务有限公司</div>
		        		<div style="color: white;">版权所有@蕙嫂家政 闽ICP备XXXXXX号</div>
		        	</div>
				</Col>
			</Row>
			<div>
				<img class="cell-hoverclass" src="http://www.hengyiyun.com/imagefront/phone/contact.png" />
			</div>
		</div>
		
		<div @mousewheel.prevent v-if="popLogin" :style="popheight" style="width: 100%;position: absolute;top: 0px;left: 0px;z-index: 999;background-color: rgba(238,238,238,0.5);"></div>
		<div @mousewheel.prevent v-if="popLogin" class="login" style="position: fixed;top: 25%;left: 50%;margin-left: -180px;z-index: 1000;">
			<div class="login-title" >
				登录/注册
			</div>
			<div class="login-input" style="margin-top: 20px;">
				<Input class="login-input-phone" v-model="username" size="large" placeholder="请输入手机号" ></Input>
			</div>
			<div class="login-input" >
				<Input class="login-input-password" @keyup.enter="dologin" v-model="password" size="large" type="password" placeholder="请输入验证码" >
					<Button slot="append">获取验证码</Button>
				</Input>
			</div>
			<Button class="login-button" size="large" type="success" @click="dologin" >登录</Button>
		</div>
		
		
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				username: "",
				password: "",
				
				popLogin:false,
				
				value2:false,
				menuSelect:"首页",
				menu: [
						{"label": "首页","value": "1"},
						{"label": "服务项目","value": "2"},
						{"label": "家庭保姆","value": "3"},
						{"label": "专业月嫂","value": "4"},
						{"label": "关于我们","value": "5"},
				],
				serveGoods:[
				
					{"name":"员工筛选","src":require('../../static/img/serve_security/serve_security_3.png')},
					{"name":"技能考核","src":require('../../static/img/serve_security/serve_security_6.png')},
					{"name":"专业培训","src":require('../../static/img/serve_security/serve_security_4.png')},
					{"name":"技能认证","src":require('../../static/img/serve_security/serve_security_5.png')},
					{"name":"跟踪回访","src":require('../../static/img/serve_security/serve_security_2.png')},
					{"name":"品质无忧","src":require('../../static/img/serve_security/serve_security_1.png')},
					
				],
				colorList:[
					"#fff2b5","#ffd661","#8cd6b5","#ff8c78","#8a8cb2","#fa6e85","#de9dd6","#dbf977","#97ec71","#4fc5c7"
				],
				
			}
		},
		created() {
			this.referChangeRouterLink();
		},
		computed:{
			activeclass: function() {
				return 'active1'
			},
			popheight: function() {
				return {
//					width: "100%",
					height: document.body.scrollHeight + "px",
				}
			},
		},
		methods:{
			dologin: function() {
				this.popLogin = false;
//				this.$router.push("/")
			},
			referChangeRouterLink: function() {
				let avtivelink = this.$route.path;
				if(avtivelink.indexOf("homeMakingServe") >= 0) {
					this.menuSelect = "服务项目";
				}else if(avtivelink.indexOf("homeNurse") >= 0){
					this.menuSelect = "家庭保姆";
				}else if(avtivelink.indexOf("professionMaternity") >= 0){
					this.menuSelect = "专业月嫂";
				}else if(avtivelink.indexOf("aboutUs") >= 0){
					this.menuSelect = "关于我们";
				}else{
					this.menuSelect = "首页";
				}
			},
			goLogin:function(){
				 if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
	                this.$router.push("/login")//手机
	           } else {	                
					this.popLogin = true;
	            }
				
				
//				
			},
			goPersonCenter:function(){
				this.$router.push("/personCenter")
			},
			PersonCenter:function(name){
//				console.log(name)
				if(name == "personCenter"){
					this.$router.push("/personCenter")
				}else if(name == "loginOut"){
					//退出
				}
				
			},
			menuClick:function(value){
//				console.log(value)
				this.menuSelect = value;
				switch(value){
					case "首页":
		       			this.$router.push("/")
			     		break;
			     	case "服务项目":
			       		this.$router.push("/homeMakingServe")
			     		break;
		     		case "家庭保姆":
			       		this.$router.push("/homeNurse")
			     		break;
		     		case "专业月嫂":
			       		this.$router.push("/professionMaternity")
			     		break;
			     	case "关于我们":
			       		this.$router.push("/aboutUs")
			       		break;
			     	default:
			       		break;
			   	}
				this.value2 = false;
			}
		}
	}
</script>

<style lang="css" scoped>
	
	@media only screen and (min-width: 540px){
		
		.home >>> .login{
			width: 360px;
			height: 320px;
			background-color: white;
			border: 1px solid #e4e3e3;
			border-radius: 5px;
		}
		.home >>> .login-title{
			font-size: 20px;
			margin-top: 30px;
			display: flex;
			justify-content: center;
		}
		.home >>> .login-input{
			width: 100%;
			display: flex;
			justify-content: center;
		}
		.home >>> .login-input-phone{
			margin:10px;
			width: 80% !important;
		}
		.home >>> .login-input-password{
			margin:10px;
			width: 80% !important;
		}
		.home >>> .login-button{
			background-color: #009a00;
			margin-top:25px;
			margin-left: 40px;
			width: 280px;
			height: 40px;
		}
		
		.home >>> .active1{
			color: green;
		}
		.home >>> .top{
			width: 1200px;
			margin: 0 auto;
		}
		.home >>> .m-top{
			display: none !important;
		}
		.home >>> .foot{
			text-align: center;
			background-color: #009a00;
			padding: 20px;
		}
		.home >>> .cell-hoverclass {
			position: fixed;
			top: 60%;
			right: -173px;
			transition: all 0.5s;
		}
		.home >>> .cell-hoverclass:hover {
			right: 0px;
		}
	}
	/** 手机 **/
	@media only screen and (max-width: 540px) {
		.home >>> .active1{
			color: green;
		}
		.home >>> .top{
			display: none !important;
		}
		.home >>> .m-top{
			width: 100%;
			height: 50px;
			background-color: #009a00;
		}
		
		
		.home >>> .foot{
			text-align: center;
			background-color: #009a00;
			padding: 15px;
		}
		.home >>> .small-hiddle {
			display: none !important;	
		}
		.home >>> .cell-hoverclass {
			display: none;
		}
	}
</style>